<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>借出详情-云校通_教师版</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="<%=basePath%>/style/weui.css"/>
    <link rel="stylesheet" href="<%=basePath%>/style/weui2.css"/>
    <link rel="stylesheet" href="<%=basePath%>/style/weui3.css"/>
    <link rel="stylesheet" href="<%=basePath%>/css/xcgl_kcgl.css"/>
    <link rel="stylesheet" href="<%=basePath%>/style/icon.css"/>
    <style>
      .no_border {
	    border: none !important;
	    height: 180px;
      }
      .no_border .atype {
	width: 100%;
}
      .detelist{
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        padding-top: 10px;
      }
      .detelist ul{
        position: relative;
        clear: both;
        overflow: hidden;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 4%; 
      }
      .detelist ul li{
        width: 46%;
        font-size: 16px;
      }
      .detelist ul .right{
        position: absolute; right: 80px; top: 10px;
      }
      .detelist h4 {
	margin-left: 4%;
	font-size: 16px;
	font-weight: normal;
	padding-top: 10px;
	padding-bottom: 10px;
}

.detelist p {
	width: 92%;
	margin-left: 4%;
	padding-bottom: 10px;
	font-size: 14px;
}

      .massage{
        width: 100%;
        margin-top: 8px;
        background: #fff;
      }
      .massage h4{
        margin-left: 4%;
        font-size: 16px;
        font-weight: normal;
        padding-top: 10px;
        padding-bottom: 10px;
      }
      .massage p{
        width: 92%;
        margin-left: 4%;
        padding-bottom: 20px;
      }
      .weui_btn_area{
        margin-top: 80px;
      }
     .no_border textarea {
		width: 84%;
		min-height: 80px;
		margin-left: 11%;
		margin-top: 4px;
		border-radius: 4px;
		background: #f8f8f8;
		border: 1px solid #d9d9d9;
		outline: none;
		padding-top: 10px;
		text-indent: 14px;
     }
     img {
	margin-left: 10px;
	margin-top: 12px;
	width: 18px;
	height: 18px;
}
#menu_1{}
#menu_1 ul{
	position: relative;
	overflow: hidden;
}
#menu_1 ul li{
	margin-left: 4%;
	width: 40%; height: 40px;
	line-height: 40px;
	text-align: center;
}
#menu_1 ul li select{
	border: 1px solid #666;
	border-radius: 4px;
	height: 20px;
}
#menu_1 ul .m_right{
	position: absolute; right: 4%; top: 0px;
}
    </style>
    <script src="<%=basePath%>/js/zepto.min.js"></script>
    <script src="<%=basePath%>/js/swipe.js"></script>
  </head>
 <body ontouchstart>
 <div id="homepage"></div>
 <div id="nopage"></div>
 <div id=""></div>
  <jsp:include page="/WEB-INF/page/common/_header.jsp"></jsp:include>
	<div class="weui-header bg-blue">
		<div class="weui-header-left">
			<a onclick="back()" class="icon icon-109 f-white">返回</a>
		</div>
		<h1 class="weui-header-title">详情</h1>
	</div>
	<div style="display: none;" id="recordId">${item.id}</div>
    <div class="detelist">
      <ul>
        <li>借用人</li>
        <li class="right">${item.usedName}</li>
      </ul>
      <ul>
        <li>物品类别</li>
        <li class="right">${item.typeName}</li>
      </ul>
      <ul>
        <li>物品名称</li>
        <li class="right">${item.goodsName}</li>
      </ul>
      <ul>
        <li>型号</li>
        <li class="right">${item.goodsAttr}</li>
      </ul>
      <ul>
        <li>数量</li>
        <li class="right">${item.number}</li>
      </ul>
      <div class="describe">
		<h4>描述</h4>
		<p>${item.describe}</p>
	  </div>
      <ul>
        <li>借用日期</li>
        <li class="right"><f:formatDate value="${item.createTime}" pattern="yyyy.MM.dd HH:mm:ss"/></li>
      </ul>
    </div>
    <div class="weui_panel">
        <div class="weui_panel_bd">
            <div class="weui_media_box weui_media_small_appmsg">
                <div class="weui_cells weui_cells_access">
                    <a href="javascript:;" class="weui_cell"  onclick="selectmenu('1');">
                        <div class="weui_cell_hd"><i class="icon icon-67"></i></div>
                        <div class="weui_cell_bd weui_cell_primary">
                            <p>编号</p>
                        </div>
                        <span id="cell_1" class="icon icon-74 f-green"></span>
                    </a>
                </div>
            </div>
        </div>
        <div  style="display: none;" id="menu_1">
        	<ul class="m_title">
        		<li>编号</li>
        		<li class="m_right">状态</li>
        	</ul>
        	<c:forEach var="no" items="${item.nos}">
        	<ul class="m_main">
        		<li>${no.goodsNo}</li>
        		<li class="m_right">
        			<span class="weui_btn weui_btn_mini weui_btn_primary NOstatus" value="${no.goodsId}">正常</span>
        		</li>
        	</ul>
        	</c:forEach>
        </div>
    </div>
    <div class="weui_panel">
     <div class="weui_panel_bd">
    <ul class="no_border" id="menu_1">
				<li style="display: inline-block;"><img src="<%=basePath%>/images/miaoshu.png"></li>
				<li style="display: inline-block;"><p>反馈</p></li>
				<li class="clear atype"><textarea class="clear rdescribe"
						placeholder="请详细描述借用用途" style="resize: none;" v-model="post_form.describe"></textarea></li>
			</ul>
			</div>
    </div>			
    <div class="weui_btn_area clear" style="padding-bottom: 65px;">
      <a href="javascript:" class="weui_btn bg-blue" onclick="submit()">归还</a>
    </div>
    <jsp:include page="/WEB-INF/page/common/_footer.jsp"></jsp:include>
  </body>
 <script type="text/javascript">
function selectmenu(n){
   var eleMore = document.getElementById("menu_"+n);
   if(eleMore.style.display=="none"){
      eleMore.style.display = 'block';
      $("#cell_"+n).removeClass("icon-74");
      $("#cell_"+n).addClass("icon-35 ");
   }else{
      eleMore.style.display = 'none';
      $("#cell_"+n).removeClass("icon-35");
      $("#cell_"+n).addClass("icon-74");
   }
}

$("#menu_1").on("click",".weui_btn_mini",function(){
	var temp = $(this).attr('class');
	  if(temp ==='weui_btn weui_btn_mini weui_btn_primary NOstatus'){
	      $(this).attr('class','weui_btn weui_btn_mini weui_btn_warn NOstatus')
		   $(this).html("损坏");
	  }else{
		  $(this).attr('class','weui_btn weui_btn_mini weui_btn_primary NOstatus');
		  $(this).html("正常");
	  }
})
function submit(){
	var id = ($("#recordId").html()).trim();
	var goodsIds = '';
    for (var i = 0; i < $(".NOstatus").length; i++) {
    	var flag =  $($(".NOstatus")[i]).html();
    	if(flag ==='正常')
    		continue;
    	
       var temp = $($(".NOstatus")[i]).attr('value');
       if(i === 0)
    	   goodsIds = temp.trim();
       else
           goodsIds = goodsIds + "," + temp.trim();
	}
    var describe = ($(".rdescribe").val()).trim();
    if(id !='' && id != null){
    	$.ajax({
    		url : basePath + '/ls/school/property/outputRecord/update',
    		type : 'post',
    		dataType : 'json',
    		data : {
    			id: id,
    			describe:describe,
    			detailIds:goodsIds
    		},
    		success : function(data) {
    			if(data.code == "000"){
    				window.location.href = (basePath + "/ls/school/property/lendAndReturnInex?dateTime=" + new Date().getTime());
    			}
    		}
    	})
    }
	
}
</script>    
</html>